.container {
  --button-size: 0.8rem;

  display: grid;
  grid-template-columns: repeat(3, var(--button-size));
  align-items: center;
  gap: 0.6rem;

  height: 100%;

  &.unFocussed .trafficLight {
    --bgcolor: hsla(var(--app-color-dark-hsl), 0.3);
    --border-color: hsla(var(--app-color-dark-hsl), 0.5);
  }

  svg {
    visibility: hidden;
  }

  &:hover svg {
    visibility: visible;
  }
}

.trafficLight {
  height: var(--button-size);
  width: var(--button-size);

  border-radius: 50%;

  background-color: var(--bgcolor);
  box-shadow: 0 0 0 0.5px var(--border-color);
}

.closeLight {
  composes: trafficLight;
  --bgcolor: #ff5f56;
  --border-color: #e0443e;
}

.stretchLight {
  composes: trafficLight;
  --bgcolor: #27c93f;
  --border-color: #1aab29;
  transform: rotate(90deg);
}

.minimizeLight {
  composes: trafficLight;
  --bgcolor: #ffbd2e;
  --border-color: #dea123;
}
